{% extends "base.html" %}
{% load staticfiles %}
{% block title %}按月总结{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/select2.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/daterangepicker.css' %}">
{% endblock %}
{% block amount %}active{% endblock %}
{% block content %}
    <form method="post" action="{% url 'store:month_amount' %}">
    {% csrf_token %}
        <label for="people" class="flex-fill h5" style="width: 90px; border: none;">单位:</label>
        <select name="org" id="people" class="js-example-responsive">

            {% for organization in orgs %}
                <option class="form-control flex-fill"
                        value="{{ organization.id }}">
                    {{ organization.organization }}
                </option>
            {% endfor %}

        </select>
        <label for="date">日期：</label>
        <input id="date" name="date" required="required" style="display:inline-block;width: 220px;"/>
        <input type="hidden" id="startTime" name="startTime"/>
        <input type="hidden" id="endTime" name="endTime"/>
        <button type="submit">提交</button>
    </form>
    {% if noresult %}
        没有找到相关记录
    {% endif %}
    {% if this_month %}
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col" class="phone">#</th>
                <th scope="col">单号</th>
                <th scope="col">金额</th>
                <th scope="col">时间</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2" align="right" style="font-weight: bold">总计：</td>
                    <td colspan="2" align="left" style="font-weight: bold">￥：{{ amount | floatformat:2}}</td>
                </tr>
                {% for ticket in this_month %}
                    <tr>
                        <td class="phone">{{ forloop.counter }}</td>
                        <td><a href="{% url 'store:ticket' ticket.id %}" target="_blank">{{ ticket.number }}</a></td>
                        <td class="phone">￥{{ ticket.total_pries }}</td>
                        <td class="phone">{{ ticket.create_time }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
{% endblock %}
{% block js %}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/select2.min.js' %}"></script>
    <script src="{% static 'js/moment.js' %}"></script>
    <script src="{% static 'js/daterangepicker.js' %}"></script>
    <script>
        // 选择搜索框
        $(document).ready(function () {
            $('#people').select2();
        });
        $(function () {
            //区间时间插件
            $("input[name='date']").daterangepicker(
                {
                    // autoApply: true,
                    autoUpdateInput: false,
                    alwaysShowCalendars: true,
                    ranges: {
                        '今天': [moment(), moment()],
                        '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        '近7天': [moment().subtract(7, 'days'), moment()],
                        '这个月': [moment().startOf('month'), moment().endOf('month')],
                        '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    locale: {
                        format: "YYYY/MM/DD HH:MM:SS",
                        separator: " - ",
                        applyLabel: "确认",
                        cancelLabel: "清空",
                        fromLabel: "开始时间",
                        toLabel: "结束时间",
                        customRangeLabel: "自定义",
                        daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
                    }
                }
            ).on('cancel.daterangepicker', function (ev, picker) {
                $("#date").val("请选择日期范围");
                $("#startTime").val("");
                $("#endTime").val("");
            }).on('apply.daterangepicker', function (ev, picker) {
                $("#startTime").val(picker.startDate.format('YYYY-MM-DD'));
                $("#endTime").val(picker.endDate.format('YYYY-MM-DD'));
                $("#date").val(picker.startDate.format('YYYY-MM-DD') + " 至 " + picker.endDate.format('YYYY-MM-DD'));
            });

        });
    </script>
{% endblock %}